<template>
    <div class="root">
      <an-nav></an-nav>
      <div>
        <div style="margin-bottom: 10px">
          <el-button type="primary" @click="addDataFun">添加分类</el-button>
        </div>
  
        <el-table
          v-loading="loading"
          :data="pageData.list"
          stripe
          style="width: 100%"
          :height="
            clientWidth < 960 ? 'calc(100vh - 220px)' : 'calc(100vh - 234px)'
          "
        >
          <!-- 展开行 -->
          <el-table-column type="expand">
            <template #default="props">
              <!-- 插槽 -->
              <slot name="open" :data="props.row" :typelist="pageData.typeList">
                <pre
                  >{{ props.row }}
  </pre
                >
              </slot>
  
              <!-- <div><span>标题: </span>{{ props.row.productName }}</div> -->
            </template>
          </el-table-column>
  
          <el-table-column
            prop="type_id"
            label="分类ID"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="name" label="名称"> </el-table-column>
  
          <!-- 插槽 -->
          <slot :form="scope"></slot>
          <el-table-column prop="sort" label="排序" width="80" align="center">
          </el-table-column>
          <el-table-column
            align="center"
            width="100"
            label="状态"
            :filters="[
              { text: '显示', value: '1' },
              { text: '隐藏', value: '0' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template #default="scope">
              <el-tag v-if="scope.row.a_show == '1'" type="success">显示</el-tag>
              <el-tag v-else type="info">隐藏</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" width="180">
            <template #default="scope">
              {{ time(scope.row.up_time, "yyyy-mm-dd hh:MM:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="110" fixed="right" align="center">
            <template #default="scope">
              <div class="flex">
                <div>
                  <el-button
                    @click="editData(scope.row)"
                    type="text"
                    size="small"
                  >
                    编辑</el-button
                  >
                </div>
                <div>
                  <el-popconfirm
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    icon-color="red"
                    title="确定删除当前数据？"
                    @confirm="delData(scope.row)"
                  >
                    <template #reference>
                      <el-button type="text" size="small">删除</el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <!-- 分页 -->
      <div class="c1">
        <el-pagination
          :small="clientWidth < 960"
          background
          :default-page-size="searchData.limit"
          @size-change="switchSizeChange"
          @current-change="switchCurrentChange"
          v-model:currentPage="searchData.page"
          :pager-count="5"
          :layout="
            clientWidth < 960
              ? 'total,prev, pager, next'
              : 'total,prev, pager, next,sizes'
          "
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :total="pageData.total"
        >
        </el-pagination>
      </div>
    </div>
  
    <el-dialog
      v-model="pageData.showForm"
      :title="pageData.isAdd ? '添加分类' : '编辑分类'"
      width="380px"
      center
    >
      <div style="padding: 0 20px">
        <el-form label-width="110px" label-position="left" size="large">
          <!-- 父组件调用数据方式
                  如：父组件需要使用子组件的 pageData.form.name字段
                  <template #form="data">
                      {{data.form.name}}
                  </template> -->
  
          <el-form-item label="名称：">
            <el-input
              v-model.trim="pageData.form.name"
              placeholder="请输入分类名称"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="分类ID：">
            <el-input
              v-model.trim="pageData.form.type_id"
              type="number"
              placeholder="不能跟已有的分类ID重复"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="图片：">
            <div @click="selectImg('img')" class="c2">
              <el-image
                style="width: 60px; height: 60px"
                :src="pickImg.serverImg + pageData.form.img"
                fit="scale-down"
              />
            </div>
          </el-form-item>
  
          <!-- 具名插槽 作用域插槽 -->
          <slot name="form" :form="pageData.form"></slot>
  
          <el-form-item label="排序：">
            <el-input
              v-model.trim="pageData.form.sort"
              type="number"
              placeholder="数字越大排名越靠前，0最小"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="状态：">
            <el-radio v-model="pageData.form.a_show" label="1"> 显示 </el-radio>
            <el-radio v-model="pageData.form.a_show" label="0"> 隐藏 </el-radio>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="large" @click="pageData.showForm = false"
            >取消</el-button
          >
          <el-button size="large" type="primary" @click="subForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <keep-alive>
      <aImgLocal
        :spaceValue="pickImg.spaceValue"
        v-model:show="pickImg.showLocal"
        :name="pickImg.name" 
        @img="imgSuccess">
      </aImgLocal>
    </keep-alive>

  </template>
  
  <script setup>
  //图片选择组件
  import useSelectImg from "@/hook/useSelectImg.js";
  const { aImgLocal, pickImg, selectImg, imgSuccess } = useSelectImg(
    "local",
    (res) => {
      if (res.name == "img") {
        pageData.form.img = res.value;
      }
    }
  );
  
  import time from "@/utils/timeFormat.js";

import publicJS from "@/hook/public.js";
const { ElMessage, aTips, config, api } = publicJS();

const clientWidth = ref(document.body.clientWidth);
import useWindowSize from "@/hook/useWindowSize.js";
useWindowSize(function (w, h) {
  clientWidth.value = w;
});

const props = defineProps({
  type: {
    type: String,
    default: "",
  },
});

// 获取列表 条件
const searchData = reactive({
  keyWord: "",
  type: props.type,
  page: 1,
  limit: 20,
});

//筛选当前页数据的 状态
const filterTag = (value, row) => {
  return row.a_show === value;
};

//页面数据
const pageData = reactive({
  showForm: false,
  isAdd: true,
  list: [],
  form: {
    name:'',
    other:'',
    pid:'',
    sort:'',
    icon:'',
    type_id:'',
    a_show:'1',
    img:'',
    id:''
  },
  total: 0,
});

const loading = ref(false);
const getList = () => {
  loading.value = true;
  let url = "a/common/type_list_data";
  if (props.type == "family") url = "a/family/get_family_list";
  api.post(url, searchData).then((res) => {
    pageData.list = res.data;
    pageData.total = res.total;
    loading.value = false;
  });
};
getList();

//删除数据
const delData = (v) => {
  aTips("确定删除 " + v.name + " 分类？", (e) => {
    let url = "api/common/type_del_data";
    if (props.type == "family") url = "api/family/type_del_data";
    api.post(url, { id: v.id, name: v.name }).then((r) => {
      getList();
    });
  });
};

//新增类型
const addDataFun = () => {
  pageData.showForm = true;
  pageData.isAdd = true;
  for (let i in pageData.form) pageData.form[i] = "";
  pageData.form.a_show = "1";
};

//编辑数据
const editData = (v) => {
  pageData.isAdd = false;
  pageData.showForm = true;
  pageData.form = v;
};

//提交数据
const subForm = () => {
  api.post("api/common/editType", {
      ...pageData.form,
      type: props.type
    })
    .then((res) => {
      for (let i in pageData.form) pageData.form[i] = "";
      pageData.form.a_show = "1";
      pageData.showForm = false;
      ElMessage.success("操作成功");
      getList();
    });
};
</script>

<script>
import anConfig from "@/common/config.js";
export let config = anConfig;
</script>

<style scoped lang="scss">
.c1 {
  margin-top: 10px;
}
.c2 {
  height: 62px;
  width: 62px;
  border: 1px solid #fff;
  transition: all 0.3s;
}
.c2:hover {
  cursor: pointer;
  border: 1px solid var(--el-color-primary);
}
</style>
